<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-09-23 20:07:52
-->
<template>
  <!-- 2.创建一个图表容器 容纳图表 -->
  <div ref="root" style="height: 150px"></div>
</template>
<script>
import { Area } from "@antv/g2plot"
//vue3使用生命周期钩子函数 dom节点要进行引用
import {ref,onMounted} from "vue"
//1.引入组件
export default {
  //vue3新特性 setup里面放data methods mounted等等
  setup() {
    let root = ref(null);
    let area = null;
    //3.创建一个折线图实例对象
    //封装initCharts方法
    let initCharts = () => {
      //root指代ref根节点 root.value指的是ref="root"
      area = new Area(root.value, {
        data: [
          {
    "Date": "2010-01",
    "scales": 1998
  },
  {
    "Date": "2010-02",
    "scales": 1850
  },
  {
    "Date": "2010-03",
    "scales": 1720
  },
  {
    "Date": "2010-04",
    "scales": 1818
  },
  {
    "Date": "2010-05",
    "scales": 1920
  },
  {
    "Date": "2010-07",
    "scales": 1945
  },
  {
    "Date": "2010-08",
    "scales": 1856
  },
  {
    "Date": "2010-09",
    "scales": 2107
  },
  {
    "Date": "2010-10",
    "scales": 2140
  },
  {
    "Date": "2010-11",
    "scales": 2311
  },
  {
    "Date": "2010-12",
    "scales": 1972
  },
        ],
        tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
         xAxis: {
          label: {
            rotate: -30,
            offset: 25,
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 14,
            },
          },
        },
        xField:"Date",
        yField:"scales",
      });
      //4.渲染
      area.render();
    };
    //mounted onMouted作用一致
    onMounted(initCharts);
    return{
      root
    }
  },
};
</script>
